<template>
  <div class="function-structure-page">
    <!-- 左侧用户输入数据区域 -->
    <div class="left-panel">
      <div class="input-section">
        <div class="section-header">
          <h3 class="section-title">功能结构数据</h3>
          <div class="header-actions">
            <el-button @click="expandAll" size="small" type="info">展开全部</el-button>
            <el-button @click="collapseAll" size="small" type="info">折叠全部</el-button>
          </div>
        </div>

        <div class="data-list">
          <div
            v-for="(item, index) in visibleData"
            :key="index"
            class="data-item"
            :class="{
              'selected': selectedItems.includes(getOriginalIndex(index)),
              'root-level': getLevel(item.text) === 0,
              'sub-level': getLevel(item.text) > 0
            }"
            :style="{ paddingLeft: `${getLevel(item.text) * 20 + 12}px` }"
            @click="toggleSelection(getOriginalIndex(index))"
          >
            <!-- 层级指示器 -->
            <div class="level-indicator">
              <div
                v-if="getLevel(item.text) > 0"
                class="level-line"
                :style="{ width: `${getLevel(item.text) * 20}px` }"
              ></div>
              <div class="level-dot" :class="`level-${getLevel(item.text)}`"></div>
            </div>

            <!-- 展开/折叠按钮 -->
            <el-button
              v-if="hasChildren(getOriginalIndex(index))"
              type="text"
              size="small"
              class="expand-btn"
              @click.stop="toggleExpand(getOriginalIndex(index))"
            >
              <el-icon>
                <ArrowDown v-if="expandedItems.includes(getOriginalIndex(index))" />
                <ArrowRight v-else />
              </el-icon>
            </el-button>

            <!-- 输入框 -->
            <el-input
              v-model="item.text"
              class="data-input"
              :placeholder="`第${getLevel(item.text) + 1}级功能`"
              @input="(value) => updateItemText(getOriginalIndex(index), value)"
              @click.stop
              @focus="handleInputFocus(getOriginalIndex(index))"
            />

            <!-- 操作按钮 -->
            <div class="item-actions">
              <el-icon
                class="action-icon add-icon"
                @click.stop="addChildItem(getOriginalIndex(index))"
                title="添加子项"
              >
                <Plus />
              </el-icon>
              <el-icon
                class="action-icon delete-icon"
                @click.stop="deleteItem(getOriginalIndex(index))"
                title="删除"
              >
                <Delete />
              </el-icon>
            </div>
          </div>
        </div>

        <div class="data-controls">
          <el-button @click="addRootItem" type="primary" size="small">
            <el-icon><Plus /></el-icon>
            添加根级
          </el-button>
          <el-button
            @click="deleteSelected"
            type="danger"
            size="small"
            :disabled="selectedItems.length === 0"
          >
            <el-icon><Delete /></el-icon>
            删除选中
          </el-button>
          <el-button @click="clearAll" type="warning" size="small">
            <el-icon><Delete /></el-icon>
            清空全部
          </el-button>
        </div>
      </div>

      <!-- AI智能生成区域 -->
      <div class="ai-section">
        <div class="ai-header">
          <el-icon><Cpu /></el-icon>
          <span>AI智能生成</span>
        </div>
        <el-input
          v-model="aiPrompt"
          type="textarea"
          :rows="3"
          placeholder="请输入系统名称或描述，比如学生管理系统"
          class="ai-input"
        />
        <div class="ai-counter">{{ aiPrompt.length }}/500</div>
        <el-button
          type="primary"
          class="ai-generate-btn"
          @click="generateWithAI"
          :loading="aiGenerating"
        >
          <el-icon><Mic /></el-icon>
          生成
        </el-button>
      </div>
    </div>

    <!-- 右侧控制和画布区域 -->
    <div class="right-panel">
      <!-- 控制区域 -->
      <div class="control-section">
        <!-- 画布设置 -->
        <div class="control-group">
          <h4 class="control-title">画布设置</h4>
          <div class="control-content">
            <div class="control-row">
              <span>整体画布缩放</span>
              <el-button @click="decreaseScale" size="default" :disabled="canvasSettings.scale <= 20">-</el-button>
              <span class="scale-value">{{ canvasSettings.scale }}%</span>
              <el-button @click="increaseScale" size="default" :disabled="canvasSettings.scale >= 200">+</el-button>
              <el-button
                type="primary"
                size="default"
                @click="refreshDiagram"
                class="refresh-btn"
              >
                重新渲染
              </el-button>
            </div>
            <div class="control-row">
              <el-button @click="toggleFullscreen" class="action-btn" size="default">全屏</el-button>
              <el-button @click="exportImage" type="primary" class="action-btn" size="default">导出图片</el-button>
              <el-button @click="copyToClipboard" type="success" class="action-btn" size="default">复制图片到剪贴板</el-button>
              <!-- <el-button @click="testLayoutUpdate" type="warning" class="action-btn" size="default">测试布局更新</el-button> -->
            </div>
          </div>
        </div>

        <!-- 样式设置 -->
        <div class="control-group">
          <h4 class="control-title">样式设置</h4>
          <div class="control-content">
            <div class="style-row">
              <div class="control-item">
                <label>边框颜色：</label>
                <el-color-picker v-model="styleSettings.borderColor" />
              </div>
              <div class="control-item">
                <label>显示箭头</label>
                <el-switch v-model="styleSettings.showArrow" />
              </div>
              <div class="control-item">
                <label>字体加粗</label>
                <el-switch v-model="styleSettings.fontWeight" />
              </div>
              <div class="control-item">
                <label>字体颜色</label>
                <el-color-picker v-model="styleSettings.fontColor" />
              </div>
            </div>
            <div class="style-row">
              <div class="control-item">
                <label>边框粗细：</label>
                <el-input-number
                  v-model="styleSettings.borderWidth"
                  :min="1"
                  :max="10"
                  :step="1"
                  size="default"
                  controls-position="right"
                />
              </div>
              <div class="control-item">
                <label>字体大小</label>
                <el-input-number
                  v-model="styleSettings.fontSize"
                  :min="10"
                  :max="50"
                  :step="1"
                  size="default"
                  controls-position="right"
                />
              </div>
            </div>
            <div class="style-row">
              <div class="control-item">
                <label>字体选择</label>
                <el-select v-model="styleSettings.fontFamily" size="default">
                  <el-option label="宋体" value="SimSun" />
                  <el-option label="微软雅黑" value="Microsoft YaHei" />
                  <el-option label="Arial" value="Arial" />
                </el-select>
              </div>
            </div>
          </div>
        </div>

        <!-- 节点设置 -->
        <div class="control-group">
          <h4 class="control-title">节点设置</h4>
          <div class="control-content">
            <div class="node-row">
              <div class="control-item">
                <label>首级节点宽度</label>
                <el-input-number
                  v-model="nodeSettings.rootNodeWidth"
                  :min="50"
                  :max="500"
                  :step="10"
                  size="default"
                  controls-position="right"
                />
              </div>
              <div class="control-item">
                <label>普通节点宽度</label>
                <el-input-number
                  v-model="nodeSettings.normalNodeWidth"
                  :min="50"
                  :max="500"
                  :step="10"
                  size="default"
                  controls-position="right"
                />
              </div>
              <div class="control-item">
                <label>普通节点高度</label>
                <el-input-number
                  v-model="nodeSettings.normalNodeHeight"
                  :min="40"
                  :max="500"
                  :step="5"
                  size="default"
                  controls-position="right"
                />
              </div>
            </div>

            <div class="node-row">
              <div class="control-item">
                <label>节点间距</label>
                <el-input-number
                  v-model="nodeSettings.nodeSpacing"
                  :min="10"
                  :max="100"
                  :step="5"
                  size="default"
                  controls-position="right"
                />
              </div>
              <div class="control-item">
                <label>连接线粗度</label>
                <el-input-number
                  v-model="nodeSettings.linkWidth"
                  :min="1"
                  :max="10"
                  :step="1"
                  size="default"
                  controls-position="right"
                />
              </div>
              <div class="control-item">
                <label>连接线的高度</label>
                <el-input-number
                  v-model="nodeSettings.linkHeight"
                  :min="20"
                  :max="500"
                  :step="5"
                  size="default"
                  controls-position="right"
                />
              </div>
              <div class="control-item">
                <label>箭头宽度</label>
                <el-input-number
                  v-model="nodeSettings.arrowWidth"
                  :min="1"
                  :max="20"
                  :step="1"
                  size="default"
                  controls-position="right"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 画布区域 -->
      <div class="canvas-section">
        <GoJSDiagram
          ref="diagramRef"
          :nodeDataArray="inputData"
          :canvasSettings="canvasSettings"
          :styleSettings="computedStyleSettings"
          :nodeSettings="nodeSettings"
          @diagramReady="onDiagramReady"
        />
      </div>
    </div>
  </div>
  <div style="margin-top: 24px;">
    <el-divider>AI原始输出</el-divider>
    <pre style="max-height:200px;overflow:auto;background:#f8f8f8;padding:8px;">{{ aiRawOutput }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, computed, watch, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Delete, Cpu, Mic, ArrowDown, ArrowRight } from '@element-plus/icons-vue'
import GoJSDiagram from './components/GoJSDiagram.vue'
import {
  generateModuleStructure
} from "@/api/tools";
import axios from 'axios'

// 用户输入数据
const inputData = ref([
  { text: '超市电商系统' },
  { text: '  商品模块' },
  { text: '    商品添加' },
  { text: '    商品分类管理' },
  { text: '    商品信息站' },
  { text: '    商品归类' },
  { text: '  购物模块' },
  { text: '    购物车管理' },
  { text: '    订单生成' },
  { text: '  订单模块' },
  { text: '    个人订单查询' },
  { text: '    订单核实' },
  { text: '    订单付款' },
  { text: '    订单归档' },
  { text: '  商家模块' },
  { text: '    生产商管理' },
  { text: '    供应商管理' },
  { text: '    品牌管理' },
  { text: '  系统模块' },
  { text: '    系统用户管理' },
  { text: '    密码修改' },
  { text: '    系统权限设置' },
  { text: '    注册用户管理' }
])

const selectedItems = ref<number[]>([])
const expandedItems = ref<number[]>([])
const aiPrompt = ref('简单的学生管理系统')
const aiGenerating = ref(false)
const aiRawOutput = ref<any>(null)
const diagramRef = ref()

// 初始化展开状态
const initExpandedState = () => {
  expandedItems.value = inputData.value
    .map((_, index) => index)
    .filter(index => hasChildren(index))
}

// 在数据变化时重新初始化展开状态
const updateExpandedState = () => {
  initExpandedState()
}

// 计算可见数据
const visibleData = computed(() => {
  const result: { text: string; originalIndex: number }[] = []

  for (let i = 0; i < inputData.value.length; i++) {
    const item = inputData.value[i]
    const level = getLevel(item.text)

    // 检查是否应该显示这个项目
    let shouldShow = true

    // 检查父级是否被折叠
    for (let j = i - 1; j >= 0; j--) {
      const parentLevel = getLevel(inputData.value[j].text)
      if (parentLevel < level) {
        // 找到父级，检查是否被折叠
        if (!expandedItems.value.includes(j)) {
          shouldShow = false
          break
        }
        break
      }
    }

    if (shouldShow) {
      result.push({ text: item.text, originalIndex: i })
    }
  }

  return result
})

// 获取原始索引
const getOriginalIndex = (visibleIndex: number): number => {
  return visibleData.value[visibleIndex]?.originalIndex ?? visibleIndex
}

// 画布设置
const canvasSettings = reactive({
  scale: 50,
  backgroundColor: '#ffffff'
})

// 样式设置
const styleSettings = reactive({
  borderColor: '#000000',
  borderWidth: 2,
  fontColor: '#000000',
  fontSize: 26,
  fontFamily: 'Microsoft YaHei',
  showArrow: true,
  fontWeight: false  // 默认不加粗
})

// 计算属性：将boolean转换为string
const computedStyleSettings = computed(() => ({
  ...styleSettings,
  fontWeight: styleSettings.fontWeight ? 'bold' : 'normal'
}))

// 节点设置
const nodeSettings = reactive({
  rootNodeWidth: 200,
  normalNodeWidth: 80,
  nodeSpacing: 40,
  linkWidth: 2,
  linkHeight: 120, // 连接线高度（控制层级间距）
  normalNodeHeight: 260, // 普通节点的高度，默认100px适合垂直文本显示
  arrowWidth: 4
})

// 监听节点设置变化
watch(nodeSettings, (newSettings) => {
  // console.log('节点设置发生变化:', newSettings)
  // console.log('普通节点高度:', newSettings.normalNodeHeight)
  // console.log('连接线高度:', newSettings.linkHeight)
}, { deep: true, flush: 'post' })

// 获取层级
const getLevel = (text: string): number => {
  const match = text.match(/^(\s*)/)
  return match ? Math.floor(match[1].length / 2) : 0
}

// 检查是否有子项
const hasChildren = (index: number): boolean => {
  const currentLevel = getLevel(inputData.value[index].text)
  const nextIndex = index + 1

  if (nextIndex >= inputData.value.length) return false

  const nextLevel = getLevel(inputData.value[nextIndex].text)
  return nextLevel > currentLevel
}

// 展开/折叠
const toggleExpand = (index: number) => {
  const idx = expandedItems.value.indexOf(index)
  if (idx > -1) {
    expandedItems.value.splice(idx, 1)
  } else {
    expandedItems.value.push(index)
  }
}

// 展开全部
const expandAll = () => {
  expandedItems.value = inputData.value
    .map((_, index) => index)
    .filter(index => hasChildren(index))
}

// 折叠全部
const collapseAll = () => {
  expandedItems.value = []
}

// 选择项目
const toggleSelection = (index: number) => {
  const idx = selectedItems.value.indexOf(index)
  if (idx > -1) {
    selectedItems.value.splice(idx, 1)
  } else {
    selectedItems.value.push(index)
  }
}

// 添加根级项目
const addRootItem = () => {
  inputData.value.push({ text: '新功能模块' })
  updateDiagram()
}

// 添加子项目
const addChildItem = (parentIndex: number) => {
  const parentLevel = getLevel(inputData.value[parentIndex].text)
  const newText = '  '.repeat(parentLevel + 1) + '新子功能'

  // 找到插入位置（在父项之后，下一个同级项之前）
  let insertIndex = parentIndex + 1
  while (insertIndex < inputData.value.length) {
    const currentLevel = getLevel(inputData.value[insertIndex].text)
    if (currentLevel <= parentLevel) break
    insertIndex++
  }

  inputData.value.splice(insertIndex, 0, { text: newText })
  updateDiagram()
}

// 删除单个项目
const deleteItem = (index: number) => {
  const currentLevel = getLevel(inputData.value[index].text)

  // 删除当前项及其所有子项
  let deleteCount = 1
  for (let i = index + 1; i < inputData.value.length; i++) {
    const level = getLevel(inputData.value[i].text)
    if (level <= currentLevel) break
    deleteCount++
  }

  inputData.value.splice(index, deleteCount)
  selectedItems.value = selectedItems.value.filter(i => i < index || i >= index + deleteCount).map(i => i > index ? i - deleteCount : i)
  updateDiagram()
}

// 删除选中项目
const deleteSelected = () => {
  const sortedIndexes = selectedItems.value.sort((a, b) => b - a)
  sortedIndexes.forEach(index => {
    deleteItem(index)
  })
  selectedItems.value = []
  updateDiagram()
}

// 清空全部
const clearAll = () => {
  inputData.value = []
  selectedItems.value = []
  expandedItems.value = []
  updateDiagram()
  ElMessage.success('已清空所有数据')
}

// 处理输入框焦点
const handleInputFocus = (index: number) => {
  selectedItems.value = [index]
}

// 更新单个项目文本
const updateItemText = (originalIndex: number, newText: string) => {
  inputData.value[originalIndex].text = newText
  updateDiagram()
}

// 添加防抖变量
let updateTimer: NodeJS.Timeout | null = null

// 更新图表 - 添加防抖
const updateDiagram = () => {
  if (updateTimer) {
    clearTimeout(updateTimer)
  }

  updateTimer = setTimeout(() => {
    nextTick(() => {
      // 图表会通过props自动更新
      updateExpandedState()
    })
  }, 100) // 100ms防抖
}

// 画布缩放控制 - 移除不必要的updateDiagram调用
const increaseScale = () => {
  if (canvasSettings.scale < 200) {
    canvasSettings.scale += 10
    // 移除 updateDiagram() 调用，让watch自动处理
  }
}

const decreaseScale = () => {
  if (canvasSettings.scale > 20) {
    canvasSettings.scale -= 10
    // 移除 updateDiagram() 调用，让watch自动处理
  }
}

// 刷新图表
const refreshDiagram = () => {
  updateDiagram()
  ElMessage.success('图表已刷新')
}

// 全屏
const toggleFullscreen = () => {
  if (diagramRef.value) {
    diagramRef.value.toggleFullscreen()
  }
}

// 导出图片
const exportImage = () => {
  if (diagramRef.value) {
    const imageData = diagramRef.value.exportImage('PNG')
    if (imageData) {
      const link = document.createElement('a')
      link.download = '功能结构图.png'
      link.href = imageData
      link.click()
      ElMessage.success('图片导出成功')
    }
  }
}

// 复制到剪贴板
const copyToClipboard = async () => {
  if (diagramRef.value) {
    const imageData = diagramRef.value.exportImage('PNG')
    if (imageData) {
      try {
        const response = await fetch(imageData)
        const blob = await response.blob()
        await navigator.clipboard.write([
          new ClipboardItem({ 'image/png': blob })
        ])
        ElMessage.success('图片已复制到剪贴板')
      } catch (error) {
        ElMessage.error('复制失败，请手动保存图片')
      }
    }
  }
}

let eventSource: EventSource | null = null
const isLoading = ref(false)
const loadingText = ref('')
let backtickCount = 0

const startSSE = (desc: string) => {
  aiRawOutput.value = ''
  backtickCount = 0
  isLoading.value = true
  loadingText.value = 'AI生成中，请耐心等待...'
  generateModuleStructure({ desc }).then((res) => {
    console.log(res)
  })
  // if (eventSource) eventSource.close()

  // const url = `http://101.132.193.124:8080/tools/api/generateModuleStructure?desc=${encodeURIComponent(desc)}`
  // eventSource = new EventSource(url)

  // eventSource.onmessage = (event: MessageEvent) => {
  //   let line = event.data
  //   if (line.startsWith('data: ')) {
  //     line = line.substring(6)
  //   }
  //   if (line.includes('```')) {
  //     backtickCount++
  //     if (backtickCount >= 2) {
  //       eventSource?.close()
  //       isLoading.value = false
  //       handleFinalAIOutput(aiRawOutput.value)
  //       return
  //     }
  //     line = line.replace(/```/g, '')
  //   }
  //   aiRawOutput.value += line
  // }

  // eventSource.onerror = () => {
  //   isLoading.value = false
  //   eventSource?.close()
  // }

}

const handleFinalAIOutput = (output: string) => {
  const lines = output.split('\n').filter(line => line.trim())
  inputData.value = lines.map(line => ({ text: line }))
  updateDiagram()
  ElMessage.success('AI生成完成')
}

onUnmounted(() => {
  if (eventSource) {
    eventSource.close()
    eventSource = null
  }
})

const generateWithAI = () => {
  if (!aiPrompt.value.trim()) {
    ElMessage.warning('请输入系统描述')
    return
  }
  startSSE(aiPrompt.value.trim())
}

// 测试布局更新
const testLayoutUpdate = () => {
  if (diagramRef.value) {
    diagramRef.value.testLayoutUpdate()
    ElMessage.success('测试布局更新成功！')
  }
}

// 图表准备就绪
const onDiagramReady = (diagram: any) => {
  // 初始化展开状态
  initExpandedState()
}
</script>

<style scoped>
.function-structure-page {
  display: flex;
  height: calc(100vh - 40px);
  gap: 20px;
  padding: 20px;
  background: #f5f5f5;
}

.left-panel {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 0; /* 重要：允许flex子项收缩 */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-shrink: 0; /* 防止头部被压缩 */
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.data-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  min-height: 200px; /* 设置最小高度 */
  max-height: 400px; /* 设置最大高度 */
}

.data-item {
  display: flex;
  align-items: center;
  gap: 6px; /* 减少间距 */
  padding: 6px 8px; /* 减少内边距 */
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 40px; /* 确保最小高度 */
}

.data-item:last-child {
  border-bottom: none;
}

.data-item:hover {
  background: #f0f8ff;
}

.data-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #409eff;
}

.data-item.root-level {
  background: #f8f9fa;
  font-weight: 600;
}

.data-item.sub-level {
  background: white;
}

.level-indicator {
  display: flex;
  align-items: center;
  position: relative;
  width: 16px; /* 减少宽度 */
  height: 16px; /* 减少高度 */
  flex-shrink: 0;
}

.level-line {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: #d0d0d0;
  transform: translateY(-50%);
}

.level-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #409eff;
  z-index: 1;
}

.level-dot.level-0 {
  background: #1890ff;
  width: 10px;
  height: 10px;
}

.level-dot.level-1 {
  background: #52c41a;
}

.level-dot.level-2 {
  background: #faad14;
}

.level-dot.level-3 {
  background: #f5222d;
}

.expand-btn {
  width: 16px; /* 减少宽度 */
  height: 16px; /* 减少高度 */
  padding: 0;
  flex-shrink: 0;
  color: #666;
}

.expand-btn:hover {
  color: #409eff;
}

.data-input {
  flex: 1;
  min-width: 0; /* 允许输入框收缩 */
  margin-right: 4px; /* 与操作图标保持距离 */
}

.data-input :deep(.el-input__inner) {
  font-size: 13px;
  padding: 4px 6px; /* 减少内边距 */
  height: 28px; /* 减少高度 */
  border: 1px solid transparent;
  background: transparent;
  line-height: 1.2; /* 优化行高 */
}

.data-input :deep(.el-input__inner):focus {
  border-color: #409eff;
  background: white;
}

.item-actions {
  display: flex;
  gap: 4px; /* 减少图标间距 */
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0; /* 防止操作区域被压缩 */
  margin-left: 4px; /* 减少与输入框的距离 */
}

.data-item:hover .item-actions {
  opacity: 1;
}

.action-icon {
  width: 16px; /* 减少图标尺寸 */
  height: 16px; /* 减少图标尺寸 */
  cursor: pointer;
  padding: 1px; /* 减少内边距 */
  border-radius: 2px; /* 减少圆角 */
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-icon.add-icon {
  color: #409eff;
}

.action-icon.add-icon:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.action-icon.delete-icon {
  color: #f56c6c;
}

.action-icon.delete-icon:hover {
  background: #fef0f0;
  color: #f5222d;
}

.data-controls {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0; /* 防止控制按钮被压缩 */
}

.ai-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-weight: 600;
  color: #333;
}

.ai-input {
  margin-bottom: 8px;
}

.ai-counter {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-bottom: 15px;
}

.ai-generate-btn {
  width: 100%;
  background: #1890ff;
  border-color: #1890ff;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

.control-section {
  display: flex;
  gap: 15px;  /* 减少间距 */
  margin-bottom: 15px;  /* 减少底部间距 */
}

.control-group {
  background: white;
  border-radius: 6px;  /* 减少圆角 */
  padding: 15px;  /* 减少内边距 */
  flex: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);  /* 减少阴影 */
}

.control-title {
  font-size: 14px;  /* 减少字体大小 */
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;  /* 减少底部间距 */
}

.control-content {
  display: flex;
  flex-direction: column;
  gap: 12px;  /* 减少间距 */
}

.control-row,
.style-row,
.node-row {
  display: flex;
  align-items: center;
  gap: 15px;  /* 减少间距 */
  flex-wrap: wrap;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 6px;  /* 减少间距 */
  min-width: 160px;  /* 减少最小宽度 */
}

.control-row label,
.style-row label,
.node-row label {
  font-size: 13px;  /* 减少字体大小 */
  color: #333;
  white-space: nowrap;
  min-width: 70px;  /* 减少最小宽度 */
  font-weight: 500;
}

.scale-value {
  min-width: 45px;  /* 减少宽度 */
  text-align: center;
  font-size: 13px;  /* 减少字体大小 */
  font-weight: 600;
  color: #409eff;
}

.action-btn {
  font-size: 13px;  /* 减少字体大小 */
  padding: 6px 12px;  /* 减少内边距 */
  height: 32px;  /* 减少高度 */
  min-width: 70px;  /* 减少最小宽度 */
}

.canvas-section {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-input-number) {
  width: 100px;  /* 减少宽度 */
}

:deep(.el-input-number .el-input__inner) {
  font-size: 13px;  /* 减少字体大小 */
  padding: 0 10px;  /* 减少内边距 */
  height: 32px;  /* 减少高度 */
  text-align: center;
}

/* 默认隐藏数值输入框的操作按钮 */
:deep(.el-input-number .el-input-number__decrease),
:deep(.el-input-number .el-input-number__increase) {
  width: 28px;  /* 减少宽度 */
  height: 32px;  /* 减少高度 */
  line-height: 32px;  /* 调整行高 */
  font-size: 14px;  /* 减少字体大小 */
  font-weight: bold;
  color: #409eff;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  opacity: 0;  /* 默认隐藏 */
  transition: opacity 0.2s ease;  /* 添加过渡效果 */
}

/* 鼠标悬浮时显示操作按钮 */
:deep(.el-input-number:hover .el-input-number__decrease),
:deep(.el-input-number:hover .el-input-number__increase) {
  opacity: 1;  /* 悬浮时显示 */
}

:deep(.el-input-number .el-input-number__decrease:hover),
:deep(.el-input-number .el-input-number__increase:hover) {
  background: #ecf5ff;
  color: #409eff;
}

:deep(.el-select) {
  width: 120px;  /* 减少宽度 */
}

:deep(.el-select .el-input__inner) {
  font-size: 13px;  /* 减少字体大小 */
  height: 32px;  /* 减少高度 */
}

:deep(.el-color-picker) {
  width: 36px;  /* 减少宽度 */
  height: 32px;  /* 减少高度 */
}

:deep(.el-switch) {
  height: 20px;  /* 减少高度 */
}

:deep(.el-button) {
  font-size: 13px;  /* 减少字体大小 */
  padding: 6px 12px;  /* 减少内边距 */
  height: 32px;  /* 减少高度 */
}

/* 滚动条样式 */
.data-list::-webkit-scrollbar {
  width: 6px;
}

.data-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.data-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.data-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
